import { UserConfig } from '@/api';
import { ExpertSetBeans } from '@/api/expert';
import { Button, Overlay } from '@antmjs/vantui';
import { Input, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';
import { useRequest } from 'taro-hooks';

export function useAdjustingPricing(props: { onSuccess: Function }) {
  const [show, setShow] = useState<boolean>(false);
  const [price, setPrice] = useState<string | number>();

  const { runAsync, loading } = useRequest(ExpertSetBeans, {
    manual: true,
  });

  // 获取配置
  const { data: config } = useRequest(() => UserConfig({ type: 1 }));

  function renderNode() {
    return (
      <Overlay
        style='transition-duration: none; animate: none'
        id='adjustingPricingDialog'
        show={show}
        className=' flex flex-col items-center pt-[20vh]'
      >
        <View className=' w-[640px] bg-white rounded-xl overflow-hidden'>
          <Text className=' py-6 text-black font-bold text-center text-lg block'>
            调整定价
          </Text>
          <Text className=' text-lg text-gary4 text-center block px-8'>
            平台基准价格为{config?.base}
            帮豆/次，您可根据自身情况调整定价，定价范围
            {config?.min}-{config?.max}帮豆/次
          </Text>

          <View className='p-4'>
            <Input
              placeholderClass='h-10 leading-10'
              focus
              onInput={(e) => setPrice(e.detail.value)}
              type='number'
              placeholder='请输入定价（单位：帮豆/次）'
              className=' block w-full text-center h-10 leading-10'
            />
          </View>

          <View className=' border-gary5 border-solid border-t-2 flex'>
            <Button
              onClick={() => {
                setShow(false);
                setPrice(undefined);
              }}
              block
              size='large'
              className=' flex-1 text-lg font-bold border-gary5 border-solid border-r-2 rounded-none'
            >
              取消
            </Button>
            <Button
              className=' flex-1 text-lg font-bold text-primary rounded-none'
              block
              size='large'
              loading={loading}
              onClick={async () => {
                if (!price) {
                  Taro.showToast({ title: '请输入定价', icon: 'none' });
                  return false;
                }

                await runAsync({ beans: price as number });
                props.onSuccess();
                Taro.showToast({ title: '定价调整成功' });
                setShow(false);
              }}
            >
              保存
            </Button>
          </View>
        </View>
      </Overlay>
    );
  }

  return {
    renderNode,
    open: () => {
      setShow(true);
    },
  };
}
